<template>
  <!--  -->
  <div>
  <HeadBar></HeadBar>
  <BackButton></BackButton>
  <!-- 轮播图 -->
  <SwiperImg :swiperImg="swiperImg"></SwiperImg>
  </div>
  <div class="Ticket-main">
    <TicketInfo :price="price" :label="label" :title="title"></TicketInfo>

    <!-- 日期选择 -->
    <TravelTime></TravelTime>

    <!-- 卖点 -->
    <Point></Point>

    <Summer :summary="summary"></Summer>
    <!-- 图片列表 -->
    <ImgList :descriptImg="descriptImg"></ImgList>
  </div>
  <FooterBarVue></FooterBarVue>
</template>

<script>
import { useRoute } from "vue-router";
import { onMounted } from "vue";
import { reactive, toRefs } from "@vue/reactivity";
import HeadBar from "../../components/detail/HeadBar.vue";
import SwiperImg from "../../components/detail/SwiperImg.vue";
import TicketInfo from "../../components/detail/TicketInfo.vue";
import TravelTime from "../../components/detail/TravelTime.vue";
import Point from "../../components/detail/Point.vue";
import Summer from "../../components/detail/Summer.vue";
import BackButton from "../../components/detail/BackButton.vue";
import FooterBarVue from "../../components/detail/FooterBar.vue";
import ImgList from "../../components/detail/ImgList.vue";
import { getDetail } from "../../api/service/home";
import { useRouter } from "vue-router";
export default {
  components: {
    HeadBar,
    SwiperImg,
    TicketInfo,
    TravelTime,
    Point,
    Summer,
    BackButton,
    FooterBarVue,
    ImgList,
  },
  setup() {
    const route = useRoute();
    const state = reactive({
      descriptImg: [],
      label: [],
      price: null,
      summary: null,
      swiperImg: [],
      title: null,
    });
    const router = useRouter();
    onMounted(() => {
      console.log("id", route.query.id);
      getDetail({ id: route.query.id }).then((res) => {
        console.log("详情页的数据", res);
        state.descriptImg = res.data.descriptImg;
        state.label = res.data.label;
        state.price = res.data.price;
        state.summary = res.data.summary;
        state.swiperImg = res.data.swiperImg;
        state.title = res.data.title;
      });
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
.Ticket-main {
  background: #f5f5f5;
}
</style>
